<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件的注意点</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<!--
		几个注意点：
		1.关于组件名:
			一个单词组成:
				第一种写法(首字母小写):school
				第二种写法(首字母大写):School
			多个单词组成:
				第一种写法(kebab-case命名):my-school
				第二种写法(CamelCase命名):MySchool(需要Vue脚手架支持)
			备注:
				(1).组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行
				(2).可以使用name配置项指定组件在开发者工具中呈现的名字
			2.关于组件标签:
				第一种写法:<school></school>
				第二种写法:<school/>
				备注:不使用脚手架时,<school/>会导致后续组件不能渲染
			3.一个简写方式:
				const school = Vue.extend({options}) 可简写为: const school = options
		-->
		<div id="root">
			<!-- 第三步:编写组件标签 -->
			<school></school>
			<school></school>
		</div>
		<script>
			Vue.config.productionTip = false;
			
			const s = Vue.extend({
				name:'xuexiao',
				template:`
				<div>
					<h3>学校名称:{{name}}</h3>
					<h3>学校地址:{{address}}</h3>
					<button @click="showName">点我提示学校名</button>
				</div>
				`,
				data(){
					return {
						name:'星桥第一小学',
						address:'学成街'
					};
				},
				methods:{
					showName(){
						alert(this.name);
					}
				}
			});
			new Vue({
				el:'#root',
				data:{
					msg:'你好呀'
				},
				components:{
					// 局部注册
					school:s
				}
			});
		</script>
	</body>
</html>